<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>JSP Page</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style type="text/css" media="screen">
	body {
		background: #eee;
		font-family: "Helvetica Neue", sans-serif;
	}
	a { text-decoration:none; }
	a:hover { color:rgba(1, 135, 197,0.5); }
	#kategorije { width:520px; margin-bottom:1.375em;}
	#kategorije li{ display: inline-block; }
	#kategorije li a {
		background: rgba(1, 135, 197,0.5);
		*border:1px solid #333;color:#fff;
		-webkit-border-radius: 5px;
		padding: 3px 7px;
		text-decoration:none;
	}
	#kategorije li a:hover, #kategorije .current {
		background: rgba(1, 135, 197,0.9);
		color:#fff;
	}
	
	
	#dogodki {float:left; width:520px;}
	#dogodki li {
		border-bottom: 1px solid #aaa;
		margin-bottom: 1.375em; 
		overflow:hidden;
		padding-bottom: 0.6em;
	}
	#dogodki li:last-child { border-bottom: 0; }
	
	#dogodki li > div {
		position: relative;
	}
	
	h2 {
		font-size:1.8em;
		font-weight:lighter;
	}
	h3 {
		font-size:1.3em;
		font-weight:normal;
	}
	
	.action {
		position: absolute;
		bottom: 0px;
		right:0px;
	}
	.description, .action {
		font-size: 0.875em;
	}
	
	.basket {
		*background: rgba(231,213,17,0.7) no-repeat;
	}
	.plus {
		color: rgba(0,155,0,0.9);
		font-size: 150%;
		font-weight:bolder;
	}
	
	#cart {
		float:right;
		overflow: hidden;
		width:389px;
	}
	
	#cart h3 {
		background: url('images/shoppingcart32.png') no-repeat;
		padding-left: 40px;
		padding-bottom: 6px;
		margin-bottom: 1.375em;
	}
	
	#cart .item {
		border-bottom: 1px solid #333;
	}
	
	#cart .total {
		border-top: 2px double #333;
		text-align: right;
	}
	
	#cart .price {
		display:block;
		float:right;
	}
	
</style>
</head>
<body>
<div id="header">
<h1 id="logo">Gandalf</h1>
<ul id="nav">
	<li><a href="#about">Dogodki</a></li>
	<li><a href="#contact">Kontakt</a></li>
	<li><a href="#prijava">Prijava</a></li>
</ul>
</div><!-- header -->
<div id="section">
	<ul id="kategorije">
		<li>
			<a class="current" href="#">Vse kategorije</a>
		</li>
		<li>
			<a href="#">Koncerti</a>
		</li>
		<li>
			<a href="#">Festivali</a>
		</li>
		<li>
			<a href="#">Gledališče</a>
		</li>
	</ul>
	
	<ul id="dogodki">
		<li class="koncert">
			<h2><a href="#">Sophie Hunger</a></h2>
			<div>
				<p class="description">
					<strong>Kino Šiška</strong><br>
					Ljubljana, Slovenia
				</p>
				<div class="action">
					<a href="#" class="basket"><span class="plus">+</span> Dodaj v košarico</a>
				</div>
			</div>
		</li>
		<li class="koncert">
			<h2><a href="#">Deep Purple</a></h2>
			<div>
				<p class="description">
					<strong>Križanke</strong><br>
					Ljubljana, Slovenia
				</p>
				<div class="action">
					<a href="#" class="basket"><span class="plus">+</span> Dodaj v košarico</a>
				</div>
			</div>
		</li>
		<li class="koncert">
			<h2><a href="#">Trash Candy</a></h2>
			<div>
				<p class="description">
					<strong>Metropol</strong><br>
					Celje, Slovenia
				</p>
				<div class="action">
					<a href="#" class="basket"><span class="plus">+</span> Dodaj v košarico</a>
				</div>
			</div>
		</li>
		<li class="koncert">
			<h2><a href="#">Deep Purple</a></h2>
			<div>
				<p class="description">
					<strong>Križanke</strong><br>
					Ljubljana, Slovenia
				</p>
				<div class="action">
					<a href="#" class="basket"><span class="plus">+</span> Dodaj v košarico</a>
				</div>
			</div>
		</li>
		<li class="koncert">
			<h2><a href="#">Trash Candy</a></h2>
			<div>
				<p class="description">
					<strong>Metropol</strong><br>
					Celje, Slovenia
				</p>
				<div class="action">
					<a href="#" class="basket"><span class="plus">+</span> Dodaj v košarico</a>
				</div>
			</div>
		</li>
	</ul>
	<div id="cart">
		<h3>Nakupovalni voziček</h3>
		<ul>
			<li class="item">
				<a href="#showEvent">Deep Purple</a>
				<span class="price">3 x 45,00 EUR</span>
			</li>
			<li class="item">
				<a href="#showEvent">Trash Candy</a>
				<span class="price">35,00 EUR</span>
			</li>
			<li class="item">
				<a href="#showEvent">Sophie Hunger</a>
				<span class="price">2 x 20,00 EUR</span>
			</li>
			<li class="total">
				Skupaj: 210,00 EUR
			</li>
		</ul>
		
		<button>Zaključi z nakupom</button>
	</div>
</div>
</body>
</html>
